---
layout: default
layout_grid: true
home: true
angularjs: true
title: JHipster - Generate your Spring Boot + AngularJS apps!
sitemap:
    priority: 1.0
    lastmod: 2016-05-25T00:00:00-00:00
---
<div ng-app="jhipster.home" ng-controller="HomeController" class="home-container">
    <!-- Header -->
    <header class="home-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="logo-big"><img class="img-responsive" src="img/logo-jhipster-drink-coffee.png" alt=""></div>
                    <div class="intro-text">
                        <span class="brand">Greetings, Java Hipster!</span>
                        <hr class="star-light">
                        <div class="row stats">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <a href="https://www.npmjs.com/package/generator-jhipster" target="_blank">
                                    <div class="card dark summary-inline">
                                        <div class="card-body">
                                            <i class="icon fa fa-download fa-3x"></i>
                                            <div class="content" ng-cloak>
                                                <div class="title">{(npmDownloads)}</div>
                                                <div class="sub-title">Downloads in last 30 days</div>
                                            </div>
                                            <div class="clear-both"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <a href="https://github.com/jhipster/generator-jhipster" target="_blank">
                                    <div class="card dark summary-inline">
                                        <div class="card-body">
                                            <i class="icon fa fa-github fa-3x"></i>
                                            <div class="content" ng-cloak>
                                                <div class="title">{(gitConfig.stargazers_count)}</div>
                                                <div class="sub-title">Stars</div>
                                            </div>
                                            <div class="clear-both"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <a href="https://github.com/jhipster/generator-jhipster/contributors" target="_blank">
                                    <div class="card dark summary-inline">
                                        <div class="card-body">
                                            <i class="icon fa fa-users fa-3x"></i>
                                            <div class="content" ng-cloak>
                                                <div class="title">{(gitConftributors)}</div>
                                                <div class="sub-title">Contributors</div>
                                            </div>
                                            <div class="clear-both"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- about and news section -->
    <section id="about" class="home-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="heading">JHipster news and events</h2>
                    <hr class="star-primary">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div>
                        <p>
                            <ul>
                                <li>Ippon USA will host <a href="http://www.ipponusa.com/training/jhipster-master/" target="_blank">a JHipster training</a> in Washington, DC on July, 27th</li>
                                <li><a href="http://austinjug.org/index.jsp?p=events-20160726" target="_blank">Introduction to JHipster</a> at the Austin Java Users Group in Austin, Texas, on July 26th</li>
                                <li>The JHipster mini-book by Matt Raible <a href="http://www.infoq.com/minibooks/jhipster-mini-book" target="_blank">is available for free at InfoQ</a></li>
                            </ul>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="heading">What is JHipster?</h2>
                    <hr class="star-primary">
                </div>
            </div>
            <div class="row">
                <span class="title text-center">
                    <div class="head-icons">
                        <a href="http://yeoman.io/" target="_blank"><img src="img/logo-yeoman.png" class="project-icon img-responsive"></a> <i class="fa fa-4x">+</i>
                        <a href="http://projects.spring.io/spring-boot/" target="_blank"><img src="img/logo-spring-boot.png" class="project-icon img-responsive"></a> <i class="fa fa-4x">+</i> <a href="https://angularjs.org/" target="_blank"><img src="img/logo-angularjs.png" class="project-icon img-responsive"></a><br class="visible-xs"> <i class="fa fa-4x">=</i> <a href="/"><img src="img/logo-jhipster-small2x.png" class="project-icon img-responsive"></a>
                    </div>
                    <p class="lead">
                        JHipster is a
                        <a href="http://yeoman.io/" target="_blank">Yeoman generator</a>,
                        used to create a
                        <a href="http://projects.spring.io/spring-boot/" target="_blank">Spring Boot</a> + <a href="https://angularjs.org/" target="_blank">AngularJS</a>
                        project. <br>
                    </p>
                </span>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h2 class="hipster-font heading">Goal</h2>
                    <p>
                        Our goal is to generate for you a complete and modern Web app, unifying:
                    </p>
                    <ul>
                        <li>A high-performance and robust Java stack on the server side with Spring Boot</li>
                        <li>A sleek, modern, mobile-first front-end with AngularJS and Bootstrap</li>
                        <li>A powerful workflow to build your application with Yeoman, Bower, Gulp and Maven</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h2 class="hipster-font heading">Sample &amp; Sources</h2>
                    <p>
                        You can checkout a sample generated application
                        <a href="https://github.com/jhipster/jhipster-sample-app" target="_blank">here</a>.
                    </p>
                    <p>
                        JHipster is Open Source, and all development is done on
                        <a href="https://github.com/jhipster/generator-jhipster" target="_blank">GitHub</a>
                    </p>
                    <ul>
                        <li> If you want to code with us, feel free to join!</li>
                        <li> If you like the project, please give us a star on GitHub</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="heading">Who uses JHipster?</h2>
                    <hr class="star-primary">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" ng-controller="UsersCtrl">
                    <div>
                        <p>
                            Lots of great companies use JHipster, all over the world! <a href="{{ site.url }}/companies-using-jhipster/">Find the full list here</a>, and don't forget to add your company once you have started using JHipster <i class="fa fa-smile-o"></i>
                        </p>
                    </div>
                    <div id="carousel-customers" class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">

                            <div class="item container {($index == 0 ? 'active': '')}" ng-if="$index % 6 == 0"
                                ng-repeat="user in users | filter:{logo:'!!'} | orderBy:'name' as filteredUsers">
                                <img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive"
                                    ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index].logo)}" alt="{(filteredUsers[$index].name)}" title="{(filteredUsers[$index].name)}">
                                <img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 1)"
                                    ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 1].logo)}" alt="{(filteredUsers[$index + 1].name)}" title="{(filteredUsers[$index + 1].name)}">
                                <img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 2)"
                                    ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 2].logo)}" alt="{(filteredUsers[$index + 2].name)}" title="{(filteredUsers[$index + 2].name)}">
                                <img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 3)"
                                    ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 3].logo)}" alt="{(filteredUsers[$index + 3].name)}" title="{(filteredUsers[$index + 3].name)}">
                                <img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 4)"
                                    ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 4].logo)}" alt="{(filteredUsers[$index + 4].name)}" title="{(filteredUsers[$index + 4].name)}">
                                <img class="col-md-2 col-sm-2 col-xs-2 logo- img-responsive" ng-if="filteredUsers.length > ($index + 5)"
                                    ng-src="{{ site.url }}/companies-using-jhipster/images/{(filteredUsers[$index + 5].logo)}" alt="{(filteredUsers[$index + 5].name)}" title="{(filteredUsers[$index + 5].name)}">
                            </div>

                        </div>

                        <div align="center" style="margin-top:20px;">
                            <!-- Controls -->
                              <a class="left" href="#carousel-customers" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                              </a>
                              <a class="right" href="#carousel-customers" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                              </a>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- Stack Section -->
    <section class="success home-section" id="opts">
        <div class="row no-margin">
            <div class="col-lg-12 text-center">
                <h2 class="heading">Client side options</h2>
                <hr class="star-light">
            </div>
        </div>
        <div class="row stack-container no-margin">
            <ul class="text-center stacks">
                <li class="clip img-circle">
                    <img src="img/svg/html-5.svg" />
                    <span class="title_sub_tech">HTML5</span>
                </li>
                <li class="clip img-circle">
                    <img src="img/svg/css-3.svg" />
                    <span class="title_sub_tech">CSS3</span>
                </li>
                <li class="clip img-circle">
                    <img src="img/svg/bootstrap.svg" />
                    <span class="title_sub_tech">Bootstrap</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/angular.svg" />
                    <span class="title_sub_tech">AngularJS</span>
                </li>
                <li class="clip img-circle">
                    <img src="img/svg/jquery.svg" class="width invert-hover"/>
                    <span class="title_sub_tech">JQuery</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/websocket.png" class="invert"/>
                    <span class="title_sub_tech">Websockets</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/bower.svg"/>
                    <span class="title_sub_tech">Bower</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/gulp.svg" class="height" />
                    <span class="title_sub_tech">Gulp</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/sass.svg" class="height" />
                    <span class="title_sub_tech">Sass</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/browsersync.svg" />
                    <span class="title_sub_tech">Browsersync</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/karma.svg" />
                    <span class="title_sub_tech">Karma</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/protarctor.png" />
                    <span class="title_sub_tech">Protractor</span>
                </li>
                <li class="clear"></li>
            </ul>
        </div>
        <div class="row no-margin">
            <div class="col-lg-12 text-center">
                <h2 class="heading">Server side options</h2>
                <hr class="star-light">
            </div>
        </div>
        <div class="row no-margin">
            <ul class="text-center stacks">
                <li class="clip img-circle">
                    <img src="img/icons/spring-boot.png" />
                    <span class="title_sub_tech">Spring Boot</span>
                </li>
                <li class="clip img-circle">
                    <img src="img/icons/spring.png"/>
                    <span class="title_sub_tech">Spring Security</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/netflix.png"/>
                    <span class="title_sub_tech">Netflix OSS</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/gradle-new.png" class="invert-hover-white"/>
                    <span class="title_sub_tech">Gradle</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/maven.png" class="invert-hover-white width" />
                    <span class="title_sub_tech">Maven</span>
                </li>
                <li class="clip img-circle">
                    <img src="img/svg/hibernate.svg" />
                    <span class="title_sub_tech">Hibernate</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/liquibase.gif" class="width" />
                    <span class="title_sub_tech">Liquibase</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/mysql.svg" />
                    <span class="title_sub_tech">MySQL</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/postgresql.svg" class="height" />
                    <span class="title_sub_tech">PostgreSQL</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/oracle.svg" class="width" />
                    <span class="title_sub_tech">Oracle</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/mongo.png" class="invert"/>
                    <span class="title_sub_tech">MongoDB</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg//cassandra.svg" class="invert-hover-white" />
                    <span class="title_sub_tech">Cassandra</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/ehcache.png" />
                    <span class="title_sub_tech">EhCache</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/Hazelcast.png" class="invert-hover-white" />
                    <span class="title_sub_tech">Hazelcast</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/elasticsearch.svg"/>
                    <span class="title_sub_tech">ElasticSearch</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/thymeleaf.png"/>
                    <span class="title_sub_tech">Thymeleaf</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/icons/gatling.png"/>
                    <span class="title_sub_tech">Gatling</span>
                </li>
                <li class="clip img-circle new">
                    <img src="img/svg/cucumber.svg"/>
                    <span class="title_sub_tech">Cucumber</span>
                </li>
                <li class="clear"></li>
            </ul>
        </div>
    </section>

    <!-- quick start Section -->
    <section class="home-section" id="quick">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="heading">JHipster Quick Start</h2>
                    <hr class="star-primary">
                </div>
            </div>
            <div class="row text-center">
                <div class="col-lg-12">
                    <p>Install JHipster <code>npm install -g generator-jhipster</code></p>
                    <p>Create a new directory and go into it <code>mkdir myApp &amp;&amp; cd myApp</code></p>
                    <p>Run JHipster and follow instructions on screen <code>yo jhipster</code></p>
                    <p>Model your entities with <a href="{{ site.url }}/jdl-studio/" target="_blank">JDL Studio</a> and download the resulting <code>jhipster-jdl.jh</code> file</p>
                    <p>Generate your entities with <code>yo jhipster:import-jdl jhipster-jdl.jh</code></p>
                </div>
                <div class="col-lg-12">
                    <p><small>* Assuming you have already installed <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">Java</a>, <a href="http://git-scm.com/" target="_blank">Git</a>, <a href="http://nodejs.org/" target="_blank">Node.js</a>, <a href="http://bower.io/#install-bower" target="_blank">Bower</a>, <a href="http://yeoman.io/learning/index.html" target="_blank">Yeoman</a> and <a href="https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md" target="_blank">Gulp</a></small></p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="success home-section" id="modules" ng-controller="ModuleListCtrl">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="heading">Modules</h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <input type="text" ng-model="searchText" class="form-control search-text" placeholder="Search" id="name" required data-validation-required-message="Please enter a module to search">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <p>Top trending modules</p>
                <br>
            </div>
            <div class="row">
                <div ng-cloak ng-repeat="module in modules | filter: searchText | orderBy: '-downloads' | limitTo:16">
                    <div class="clearfix" ng-if="$index % 4 == 0"></div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <a ng-href="{{ site.url }}/modules/marketplace/#/details/{(module.name[0])}"
                            title="{(module.description[0])}">
                            <div class="card dark module summary-inline">
                                <div class="card-body">
                                    <i class="icon fa fa-cube fa-3x"></i>
                                    <div class="content">
                                        <div class="title fontSmall">{(module.name[0] | jhiModuleFilter)}</div>
                                        <div class="sub-title"><span class="fa fa-user"></span> &nbsp; {(module.author.join(','))} &nbsp; | &nbsp; <span class="fa fa-download"></span> &nbsp; {(module.downloads)}</div>
                                    </div>
                                    <div class="clear-both"></div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "http://jhipster.github.io",
  "logo": "http://jhipster.github.io/images/logo-jhipster.png",
  "name" : "JHipster",
  "sameAs" : [ "https://twitter.com/java_hipster",
    "https://github.com/jhipster/generator-jhipster"]
}
</script>
